<template>
	<view class="wd-calendar-week__wrap">
		<view class="wd-calendar-week__weekbox">
			<view class="weekbox-item" v-for="(weekday,index) in dateListArray" :key="index">{{weekday}}</view>
		</view>
		<swiper class="wd-calendar-week__swiper" circular="true" :indicator-dots="false" :current="swiperCurrent" @change="dateSwiperChange">
			<swiper-item v-for="(date,index) in dateList" :key="date.id">
				<view class="wd-calendar-week__daybox">
					<view class="daybox-item" v-for="(day,idx) in date.days" :key="day.id" :id="day.id" @tap.stop.prevent="chooseDate">
						<view class="daybox-month" v-if="dateCurrentStr==day.id || today==day.id || day.day=='01'">{{day.month}}月</view>
						<view class="daybox-day" :class="{'active':dateCurrentStr==day.id,'on':today==day.id}">{{day.day}}</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import utils from "@/common/utils.js";
	export default {
		name: 'wdCalendarWeek',
		data() {
			return {
				dateList: [], // 日历数据数组
				swiperCurrent: 0, // 日历轮播正处在哪个索引位置
				dateCurrent: new Date(), // 正选择的当前日期
				dateCurrentStr: '', // 正选择日期的 id
				dateMonth: '1月', // 正显示的月份
				dateListArray: ['日', '一', '二', '三', '四', '五', '六'],
				
				today: new Date(), // 正选择的当前日期
				
			}
		},
		mounted() {
			var today = utils.formatTime2(new Date());
			this.today = today
			var d = new Date();
			this.initDate(-5, 2, d); // 日历组件程序  -4左表示过去4周  右1表示过去一周 
		},
		methods: {
			tiaotime(e) {
				let data = e.detail.value.split("-")
				var d = new Date(Number(data[0]), Number(data[1]) - 1, Number(data[2]));
				this.dateList = []
				this.initDate(-5, 2, d); // 日历组件程序  -4左表示过去4周  右1表示过去一周
			},

			// 日历组件部分
			// ----------------------------
			initDate(left, right, d) {
				var month = utils.addZero(d.getMonth() + 1),
					year = utils.addZero(d.getFullYear()),
					day = utils.addZero(d.getDate());
				for (var i = left; i <= right; i++) {
					this.updateDate(utils.DateAddDay(d, i * 7)); //多少天之后的
				}
				this.swiperCurrent = 5
				this.dateCurrent = d
				this.dateCurrentStr = d.getFullYear() + '-' + month + '-' + day
				this.dateMonth = month + '月'
				this.dateYear = year + '年'
				this.dateCurrentStr = year + "-" + month + "-" + day
			},
			// 获取这周从周日到周六的日期
			calculateDate(_date) {
				var first = utils.FirstDayInThisWeek(_date);
				var d = {
					'month': first.getMonth() + 1,
					'days': [],
				};
				for (var i = 0; i < 7; i++) {
					var dd = utils.DateAddDay(first, i);
					var day = utils.addZero(dd.getDate()),
						year = utils.addZero(dd.getFullYear()),
						month = utils.addZero(dd.getMonth() + 1);

					d.days.push({
						'day': day,
						'month': month,
						'id': dd.getFullYear() + '-' + month + '-' + day,
						'ids': dd.getFullYear() + ',' + month + ',' + day,
					});
				}
				return d;
			},
			// 更新日期数组数据
			updateDate(_date) {
				var week = this.calculateDate(_date);
				this.dateList = this.dateList.concat(week)
			},
			// 日历组件轮播切换
			dateSwiperChange(e) {
				const lastIndex = this.swiperCurrent,
					currentIndex = e.detail.current,
					dateList = this.dateList
				let flag = false,
					key = 'lastMonth' //判断是左划还是右 
				if (lastIndex > currentIndex) {
					lastIndex === 7 && currentIndex === 0 ?
						flag = true :
						null
				} else {
					lastIndex === 0 && currentIndex === 7 ?
						null :
						flag = true
				}
				if (flag) {
					key = 'nextMonth'
				}
				if (key == 'lastMonth') {
					let nowindex = currentIndex - 3;
					let uptime = currentIndex - 4;
					let a = 0;
					if (nowindex < 0) {
						nowindex = nowindex + 8;
						a = 0
					}
					if (uptime < 0) {
						uptime = uptime + 8
					}

					let seltime = dateList[nowindex].days[a].ids.split(',')
					var week = this.calculateDate(utils.formatTime(utils.DateAddDay(new Date(Number(seltime[0]), Number(seltime[1]) - 1, Number(seltime[2])), -1)));
					dateList[uptime] = week
					this.dateList = dateList

				}
				if (key == 'nextMonth') {
					let indexne = 0
					let aa = 0
					if (currentIndex == 7) { //要更新的下标
						indexne = 0
						aa = 1
					} else {
						indexne = currentIndex + 1
						aa = currentIndex + 2
					}
					if (aa == 8) {
						aa = 0
					}
					//aa 要更新的数组下标 datanex要往后查询一周的日期
					let datanex = dateList[indexne].days[6].ids.split(',')
					//获取下一周的
					var week = this.calculateDate(utils.formatTime(utils.DateAddDay(new Date(Number(datanex[0]), Number(datanex[1]) - 1, Number(datanex[2])), 1)));
					dateList[aa] = week
					this.dateList = dateList

				}
				var dDateFormat = this.dateList[currentIndex].days[3].ids.split(',');
				this.swiperCurrent = currentIndex
				this.dateMonth = dDateFormat[1] + '月'
				this.dateYear = dDateFormat[0] + "年"
			},
			// 获得日期字符串
			getDateStr: function(arg) {
				if (utils.type(arg) == 'array') {
					return arr[0] + '-' + arr[1] + '-' + arr[2] + ' 00:00:00';
				} else if (utils.type(arg) == 'date') {
					return arg.getFullYear() + '-' + (arg.getMonth() + 1) + '-' + arg.getDate() + ' 00:00:00';
				} else if (utils.type(arg) == 'object') {
					return arg.year + '-' + arg.month + '-' + arg.day + ' 00:00:00';
				}
			},

			// 点击日历某日
			chooseDate(e) {
				var str = e.currentTarget.id;
				this.dateCurrentStr = str
				this.$emit('click', str);
			},
		},
	}
</script>

<style lang="scss">
	/* components/calendarWeek/calendarWeek.wxss */
	.wd-calendar-week__wrap {
		padding-top: 16rpx;
		padding: 15rpx 0;
		background: #fff;
		overflow: hidden;
		height: auto;
	}

	.wd-calendar-week__weekbox {
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		flex-wrap: wrap;
		flex-grow: 1;
		
		.weekbox-item {
			flex: 1;
			line-height: 38rpx;
			font-size: 26rpx;
			color: #333333;
		}
	}
	.data-month {
		width: 100%;
		align-items: center;
		padding: .5rem .35rem;
		text-align: left;
		color: #333;
		font-size: 36rpx;
	}
	
	.wd-calendar-week__swiper {
		flex-grow: 1;
		height: 90rpx;
	}

	.wd-calendar-week__daybox {
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		flex-wrap: wrap;
		flex-grow: 1;
		padding: 5rpx 0;
		height: 100%;
	}

	.daybox-item {
		flex: 1;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		align-items: center;
	}
	
	.daybox-month {
		line-height: 25rpx;
		font-size: 18rpx;
		color: #6D4BBE;
	}
	
	.daybox-day {
		position: relative;
		margin-top: 5rpx;
		width: 50rpx;
		height: 50rpx;
		line-height: 50rpx;
		font-size: 30rpx;
		color: #333333;
		
		&.on {
			color: #6D4BBE;
		}
		
		&.active {
			background: linear-gradient(131deg, #A36BFF 0%, #6D4BBE 100%);
			color: #ffffff;
			border-radius: 50%;
		}
	}
</style>
